<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ page import="com.wgn.reportquery.utils.*"%>
<%@ page import="com.wgn.reportquery.service.*"%>
<%
	String qtype="'指标'";
	String datatype = request.getParameter("datatype");
	System.out.println(datatype);
	QueryService q = new QueryService();
if(null!=datatype){
	q.getDataArray(datatype);
	qtype = q.getDataType();
	//qtype = datatype;//new String(datatype.getBytes("iso-8859-1"), "utf-8");	
	System.out.println(qtype);
//	String 
	
}
	
%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>报告图表</title>
<script src="../js/Chart.bundle.js"></script>
<script src="../js/utils.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap-dropdown.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("a").bind("click",function(){
    var datatype=$(this).html();
    if(datatype.indexOf("请选择指标")==-1){
    	//alert(datatype);
    	window.location.href="progress-bar-test.jsp?datatype="+datatype;
    }
    });
    });
    </script>
<style>
canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
</style>
    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />

    </head>

<body>
    <div><ul class="nav nav-pills">
    <li class="dropdown all-camera-dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    请选择指标
    <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
    <%out.println(q.getAllDataTypeHtml());%>
    </ul>
    </li>
    </ul>

    </div>
	<div style="width: 75%;">
		<canvas id="canvas"></canvas>
		<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
	</div>
	<br>
	<br>
	<!-- <button id="randomizeData">Randomize Data</button> -->
	<script>
        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var progress = document.getElementById('animationProgress');
        var config = {
            type: 'line',
            data: {
               labels:<% if(null!=datatype)
               out.println(q.getxList());
               else
               out.println("[0]");
               %>
            	   //["January", "February", "March", "April", "May", "June", "July"]
        ,
                datasets: [{
                	label:<%out.println(qtype);%>,
                    fill: false,
                    borderColor: window.chartColors.red,
                    backgroundColor: window.chartColors.red,
                    data: 
                    <%if(null!=datatype)
                    out.println(q.getyList());
                    else
                    out.println("[0]");
                    %>
                }, {
                    label: "上限",
                    fill: false,
                    borderColor: window.chartColors.blue,
                    backgroundColor: window.chartColors.blue,
                    data: 
                    	 <%if(null!=datatype)
                             out.println(q.getBigList());
                             else
                             out.println("[0]");
                             %>    
                    
                }, {
                    label: "下限",
                    fill: false,
                    borderColor: window.chartColors.yellow,
                    backgroundColor: window.chartColors.yellow,
                    data: 
                    	 <%if(null!=datatype)
                             out.println(q.getSmallList());
                             else
                             out.println("[0]");
                             %>    
                    
                }]
            },
            options: {
                title:{
                    display:true,
                    text:"图表"
                },
                animation: {
                    duration: 2000,
                    onProgress: function(animation) {
                        progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
                    },
                    onComplete: function(animation) {
                        window.setTimeout(function() {
                            progress.value = 0;
                        }, 2000);
                    }
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, config);
        };


    </script>
    
</body>

</html>